// 统一注册全局组件
import XtxSkeleton from './skeleton/index.vue'
import XtxCarousel from './carousel/index.vue'
import XtxMore from './more/index.vue'
import {useIntersectionObserver} from '@vueuse/core'
// 默认图片
import difaultImg from '@/assets/images/200.png'
import XtxBread from '@/components/bread/index.vue'
import XtxBreadItem from '@/components/bread/item.vue'
import XtxCity from '@/components/city/index.vue'
import XtxNumbox from '@/components/numbox/index.vue'
import XtxButton from '@/components/button/index.vue'
import XtxCheckBox from '@/components/checkbox/index.vue'
import XtxMessage from '@/components/message/message.vue'
import XtxConfirm from '@/components/confirm/confirm.vue'
import XtxDialog from '@/components/dialog/index.vue'
import XtxSwitch from '@/components/switch/index.vue'
// vue中其中一个类型App 不是根组件App
import {App} from 'vue'
export default {
    // vue 插件机制 install()
    install(app:App){
        // ('XtxSkeleton'组件名称,XtxSkeleton组件对象)
        app.component('XtxSkeleton',XtxSkeleton)
        // app.component(XtxSkeleton.name,XtxSkeleton) 两种写法作用相同
        app.component('XtxCarousel',XtxCarousel)
        // 查看更多组件
        app.component('XtxMore',XtxMore)
        // 一级分类
        app.component('XtxBread',XtxBread)
        // 二级分类
        app.component('XtxBreadItem',XtxBreadItem)
        // 城市选择
        app.component('XtxCity',XtxCity)
        // 数量选择
        app.component('XtxNumbox',XtxNumbox)
        // 按钮
        app.component('XtxButton',XtxButton)
        // 复选框
        app.component('XtxCheckBox',XtxCheckBox)
        // 消息提示
        app.component('XtxMessage',XtxMessage)
        
        app.component('XtxConfirm',XtxConfirm)
        // 对话框
        app.component('XtxDialog',XtxDialog)
        app.component('XtxSwitch',XtxSwitch)

        // 自定义图片懒加载指令
        app.directive('lazy',{
            // vue2 inseted  vue3 mouted
            mounted(el,bind){
             const {stop}=useIntersectionObserver(el,([{isIntersecting}])=>{
                // 如果进入可视区 el标签进行赋值
                if(isIntersecting){
                     el.src=bind.value
                    //  如果图片加载失败 给默认图片
                    el.onerror=function(){
                        el.src=difaultImg
                    }
                     stop()  //停止监听
                }
             })
            }
        })
    }
}